<template>
  <div class="container">
    <cc-window class="tanchuang" ref="ccwindow"></cc-window>
    <div class="daohang">
      <button
        v-for="(btn, index) in buttons"
        :key="index"
        :class="{ active: activeIndex === index }"
        @click="toggleButton(index)"
      >
        {{ btn }}
      </button>
    </div>
    <div class="list">
      <div class="souger">
        <input
          type="text"
          placeholder="请输入......"
          v-model="searchText"
          @input="handleSearch"
        />
        <button><img src="../../assets/wechatimgs/souger.png" alt="" /></button>
      </div>
      <div class="box">
        <div class="liebiao">
          <el-table :data="paginatedData" border style="width: 100%">
            <el-table-column fixed prop="date" label="日期" width="200">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="150">
            </el-table-column>
            <el-table-column prop="province" label="省份" width="150">
            </el-table-column>
            <el-table-column prop="city" label="市区" width="150">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="400">
            </el-table-column>
            <el-table-column prop="zip" label="邮编" width="200">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
              <template slot-scope="scope">
                <el-button
                  @click="handleClick(scope.row)"
                  type="text"
                  size="small"
                  ><img src="../../assets/wechatimgs/查看搜索.png" alt=""
                /></el-button>
                <el-button type="text" size="small" @click="opentanchuang"
                  ><img src="../../assets/wechatimgs/编辑.png" alt=""
                /></el-button>
                <el-button type="text" size="small"
                  ><img src="../../assets/wechatimgs/删除.png" alt=""
                /></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="fenye">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[50, 100, 150, 200]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="filteredData.length"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ccWindow from "../ccWindow/ccWindow.vue";
export default {
  components: { ccWindow },
  data() {
    return {
      allData: [], // 存储所有2000条数据
      // filteredData: [], // 当前页显示的数据
      currentPage: 1, // 当前页码
      pageSize: 50, // 每页显示条数
      searchText: "",
      buttons: ["机型字典", "固定设施", "区域"],
      activeIndex: 0,
    };
  },
  computed: {
    // 分页后的数据
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.filteredData.slice(start, end);
    },
    filteredData() {
      if (!this.searchText) return this.allData;
      return this.allData.filter((item) => {
        // 提取名字中的数字部分进行匹配
        const numberPart = item.name.replace("罗云贵", "");
        return numberPart.includes(this.searchText);
      });
    },
  },
  created() {
    this.generateData();
  },
  methods: {
    opentanchuang() {
      this.$refs.ccwindow.open();
      // console.log(this.$refs);
    },
    toggleButton(index) {
      this.activeIndex = index;
      location.reload(true); // true
    },
    handleSearch() {
      // 自动触发过滤逻辑，因为filteredData是计算属性
      this.currentPage = 1; // 搜索后重置到第一页
    },
    handleClick(row) {
      console.log(row);
    },
    // 生成2000条数据
    generateData() {
      const data = [];
      for (let i = 1; i <= 2000; i++) {
        data.push({
          date: "2024-03-25",
          name: `罗云贵${i}`,
          province: "四川",
          city: "金堂县",
          address: "四川省成都市金堂县白果街道",
          zip: 541888,
        });
      }
      this.allData = data;
      // this.filteredData = data; // 初始化时显示全部数据F
    },
    // 切换每页条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
    },
    // 切换页码
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 98vh;
  background: rgba(3, 0, 6, 0.806);
  display: flex;
  position: relative;
  //   overflow: hidden;

  .tanchuang {
    z-index: 999;
  }

  .daohang {
    width: 250px;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-right: 2px solid #fff;

    button {
      width: 200px;
      height: 100px;
      border-radius: 10px;
      color: #fff;
      font-size: 25px;
      padding: 5px;
      background: rgba(51, 4, 97, 0.712);
      border: 2px solid #fff;
      margin: 10px 20px;
      &:hover {
        background: rgba(36, 73, 107, 0.3);
        cursor: pointer;
        color: rgb(230, 162, 60);
        box-shadow: inset 0 0 20px rgba(51, 4, 97, 0.712);
      }
    }
  }
  .list {
    width: 100%;
    height: 100%;
    .souger {
      width: 100%;
      height: 70px;
      display: flex;
      input {
        width: 300px;
        height: 30px;
        margin: 20px 0;
        margin-left: 20px;
        border: none;
        color: #000;
        padding: 5px;
        transition: all 0.3s;
        &:focus {
          box-shadow: 0 0 8px rgba(51, 4, 97, 0.8);
        }
      }
      button {
        width: 50px;
        height: 40px;
        margin-top: 20px;
        border: none;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .box {
    width: 100%;
    height: 800px;
    .liebiao {
      width: 100%;
      height: 800px;
      // border: 1px solid #000;
      overflow: auto;

      ::v-deep .el-table {
        background: transparent;
        color: #fff;
        border-color: rgba(255, 255, 255, 0.3);

        /* 表头样式 */
        th {
          background: rgba(3, 0, 6, 0.806) !important;
          line-height: 35px; // 标题栏行高
          padding: 0;
          color: #fff;
          border-bottom-color: rgba(255, 255, 255, 0.3) !important;
        }

        /* 表格内容样式 */
        td {
          background: rgba(3, 0, 6, 0.806) !important;
          padding: 0;
          line-height: 30px !important; // 内容行高
          color: #fff;
          border-bottom-color: rgba(255, 255, 255, 0.2) !important;
          .el-table__cell {
            height: 30px !important;
            line-height: 30px !important;
          }
        }
      }
    }
    .fenye {
      width: 100%;
      height: 35px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      ::v-deep .el-pagination {
        color: #fff;
        padding: 20px 0;

        .btn-prev,
        .btn-next,
        .el-pager li {
          background: transparent;
          color: #fff;
          border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .el-pager li.active {
          background: rgba(51, 4, 97, 0.712);
        }

        .el-input__inner {
          background: rgba(255, 255, 255, 0.1);
          border-color: rgba(255, 255, 255, 0.3);
          color: #fff;
        }
      }
    }
  }
}
</style>
